<!-- CommentItem.vue -->
<template>
  <a-comment :author="commentData.user.userName" :avatar="commentData.user.userAvatar">
    <template #content>
      <div class="comment-content-wrapper">
        <!-- 评论内容 -->
        <p class="comment-text">{{ commentData.content }}</p>

        <!-- 评论元信息 -->
        <div class="comment-meta">
          <a-tooltip :title="commentData.dayjsCreateTime.format('YYYY-MM-DD HH:mm:ss')">
            <span class="comment-time">{{ commentData.dayjsCreateTime.fromNow() }}</span>
          </a-tooltip>
          <span class="comment-action" @click="handleToggleReply(commentData)">
            <MessageOutlined class="action-icon" /> 回复
          </span>
          <span class="comment-action" @click="handleLike(commentData)">
            <HeartOutlined class="action-icon" /> 点赞 ({{ commentData.like_count }})
          </span>
        </div>

        <!-- 回复输入框 -->
        <div v-if="commentData.showReplyInput" class="reply-input-container">
          <a-textarea
            v-model:value="commentData.replyContent"
            :rows="3"
            class="reply-textarea"
            placeholder="写下你的回复..."
            :maxlength="500"
            show-count
          />
          <div class="reply-actions">
            <a-button size="small" @click="cancelReply(commentData)">取消</a-button>
            <a-button
              size="small"
              type="primary"
              @click="submitReply(commentData)"
              :disabled="!commentData.replyContent.trim()"
            >
              回复
            </a-button>
          </div>
        </div>

        <!-- 递归渲染子回复 -->
        <div v-if="commentData.children && commentData.children.length > 0" class="nested-replies">
          <CommentItem
            v-for="child in commentData.children"
            :key="child.id"
            :comment-data="child"
            @on-reply-submit="(childItem) => $emit('on-reply-submit', childItem)"
          />
        </div>
      </div>
    </template>
  </a-comment>
</template>

<script lang="ts" setup>
import { getLikeCountUsingPost } from '@/api/commentController'
import { HeartOutlined, MessageOutlined } from '@ant-design/icons-vue'
// 定义Props和Emits
defineProps<{
  commentData: any
  parentId?: string | number | null
}>()

const emit = defineEmits<{
  (e: 'on-reply-submit', item: any): void
}>()

// 处理回复按钮点击
const handleToggleReply = (item: any) => {
  item.showReplyInput = !item.showReplyInput
  if (!item.showReplyInput) {
    item.replyContent = ''
  }
}

// 取消回复
const cancelReply = (item: any) => {
  item.showReplyInput = false
  item.replyContent = ''
}

// 提交回复
const submitReply = (item: any) => {
  if (item.replyContent.trim()) {
    emit('on-reply-submit', item)
  }
}

// 处理点赞
const handleLike = async (item: any) => {
  try {
    console.log('点赞评论:', item.id)
    const commentId = item.id
    const res = await getLikeCountUsingPost({ commentId })
    console.log('点赞成功:', res)
    // 实际项目中应调用点赞API
    item.like_count = (item.like_count || 0) + 1
  } catch (error) {
    console.error('点赞失败', error)
  }
}
</script>

<style scoped>
.comment-content-wrapper {
  position: relative;
}

.comment-text {
  margin: 0 0 12px 0;
  line-height: 1.6;
  color: #1f1f1f;
  font-size: 14px;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #8a8a8a;
}

.comment-time {
  color: #a0a0a0;
  font-size: 12px;
}

.comment-action {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 4px 8px;
  border-radius: 4px;
}

.comment-action:hover {
  color: #1890ff;
  background-color: #f0f8ff;
}

.action-icon {
  font-size: 12px;
}

.reply-input-container {
  margin: 16px 0;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.reply-textarea {
  background: white;
  border-radius: 6px;
}

.reply-textarea :deep(.ant-input) {
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  transition: all 0.3s;
}

.reply-textarea :deep(.ant-input:hover) {
  border-color: #40a9ff;
}

.reply-textarea :deep(.ant-input:focus) {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.nested-replies {
  margin-left: 32px;
  padding-left: 20px;
  border-left: 3px solid #f0f0f0;
  position: relative;
}

.nested-replies::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
}

/* 动画效果 */
.comment-action {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.reply-input-container {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nested-replies {
    margin-left: 20px;
    padding-left: 16px;
  }

  .comment-meta {
    gap: 12px;
    flex-wrap: wrap;
  }

  .comment-action {
    padding: 2px 6px;
  }
}
</style>
